import React, { useState, useEffect } from 'react';
import { Modal, Descriptions, Divider, ConfigProvider, message } from 'antd';
import axios from 'axios';
import './Model.css'; 

const Model = ({ modelId, isModalOpen, handleCancel }) => {
  const [modelData, setModelData] = useState(null);

  useEffect(() => {
    if (isModalOpen) {
      const fetchData = async () => {
        try {
          const res = await axios.get(`http://39.106.250.42:5172/get_model/${modelId}`);
          const data = res.data;
          if (Array.isArray(data) && data.length > 0) {
            setModelData(data[0]);
          } else {
            message.error('Invalid data format.');
          }
        } catch (error) {
          message.error('Failed to fetch model data.');
          console.error(error);
        }
      };

      fetchData();
    }
  }, [isModalOpen, modelId]);

  const descriptionsToken = {
    colorText: 'aliceblue',
    colorTextHeading: 'aliceblue',
    colorTextLabel: 'aliceblue',
    contentColor : 'aliceblue',
    extraColor: 'aliceblue',
    colorSplit: 'aliceblue'
  };

  return (
    <Modal title={modelData ? modelData.name : 'Loading...'} open={isModalOpen} onCancel={handleCancel} className="custom-modal">
      <ConfigProvider componentSize="middle" theme={{ token: descriptionsToken }}>
        <Divider/>
        {modelData ? (
          <>
            <Descriptions title="模型信息" labelStyle={{color: 'aliceblue'}}>
              <Descriptions.Item label="模型ID">{modelData.model_id}</Descriptions.Item>
              <Descriptions.Item label="名称">{modelData.name}</Descriptions.Item>
              <Descriptions.Item label="位置">{modelData.location}</Descriptions.Item>
              <Descriptions.Item label="类型">{modelData.type}</Descriptions.Item>
              <Descriptions.Item label="属性">{modelData.attribute}</Descriptions.Item>
              <Descriptions.Item label="状态">{modelData.state}</Descriptions.Item>
            </Descriptions>
            <Divider/>
            <Descriptions title="评估信息" labelStyle={{color: 'aliceblue'}}>
              {modelData.json.evaluate.test_image && (
                <Descriptions.Item label="Test Image">
                  <img src={`http://39.106.250.42:5172/${modelData.json.evaluate.test_image}`} alt="Test" style={{ maxWidth: '100%' }} />
                </Descriptions.Item>
              )}
              <Descriptions.Item label="准确率">{modelData.json.evaluate.acc_value}</Descriptions.Item>
              <Descriptions.Item label="CPU占用">{modelData.json.evaluate.cpu_occupancy}</Descriptions.Item>
              <Descriptions.Item label="GPU占用">{modelData.json.evaluate.gpu_occupancy}</Descriptions.Item>
              <Descriptions.Item label="内存占用">{modelData.json.evaluate.memory_occupancy}</Descriptions.Item>
            </Descriptions>
            <Divider/>
            <Descriptions title="压缩信息" labelStyle={{color: 'aliceblue'}}>
              <Descriptions.Item label="压缩算法ID">{modelData.json.compress.compress_algorithm_id}</Descriptions.Item>
              <Descriptions.Item label="压缩前准确率">{modelData.json.compress['pre-compression_acc']}</Descriptions.Item>
              <Descriptions.Item label="压缩后准确率">{modelData.json.compress.compressed_acc}</Descriptions.Item>
              <Descriptions.Item label="压缩前体积">{modelData.json.compress['pre-compression_size']}</Descriptions.Item>
              <Descriptions.Item label="压缩后体积">{modelData.json.compress.compressed_size}</Descriptions.Item>
              <Descriptions.Item label="压缩率">{modelData.json.compress.compression_ratio}</Descriptions.Item>
            </Descriptions>
          </>
        ) : (
          <p>Loading...</p>
        )}
      </ConfigProvider>
    </Modal>
  );
};

export default Model;
